<template>
	<view>
		<view class="container">
			<view class="example">
				<uni-forms ref="baseForm" label-align="left" :modelValue="formData">


					<!-- <uni-forms-item label="其他人员" name="others" labelWidth="auto" label-align="right">
						<uni-easyinput v-model="formData.others" placeholder="请输入其他人员姓名" />
					</uni-forms-item> -->

					<uni-forms-item label="申请人姓名" required name="driver" labelWidth="auto" label-align="right">
						<uni-easyinput v-model="formData.driver" placeholder="请输入申请人姓名" />
					</uni-forms-item>
					<uni-forms-item label="申请人电话" required name="contactphone" labelWidth="auto" label-align="right">
						<uni-easyinput v-model="formData.contactphone" type="number" placeholder="请输入申请人电话" />
					</uni-forms-item>
					<uni-forms-item label="人员类型" required name="persontype" labelWidth="auto" label-align="right">
						<picker @change="persontypeChange" :value="persontypeIndex" :range="persontypeLists"
							range-key="name">
							<view class="uni-input lnhgt">
								{{persontypeLists.length>0? persontypeLists[persontypeIndex].name:""}}
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="随行人员" name="others" labelWidth="auto" label-align="right">
						<uni-easyinput v-model="formData.others" placeholder="请输入随行人员姓名" />
					</uni-forms-item>
					<uni-forms-item label="目的地" required name="destination" labelWidth="auto" label-align="right">
						<view class="teambox" @click="selectdestination()">
							<text v-if="formData.destination==''">请选择目的地 > </text>
							<text> {{formData.destination}} </text>
						</view>
						<tki-tree ref="destinationtree" :range="qyLists" title="选择目的地" :multiple="false"
							:useSearch="true" :loadmore='true' @onBlur="earchdestination" @confirm="destinationChange"
							@loadMore="moredestination" idKey="id" rangeKey="name"></tki-tree>
					</uni-forms-item>

					<uni-forms-item label="入园原因" required name="reason" labelWidth="auto" label-align="right">
						<uni-easyinput v-model="formData.reason" placeholder="请输入入园原因" />
					</uni-forms-item>

					<uni-forms-item label="计划入园时间" required name="intime" labelWidth="auto">
						<biaofun-datetime-picker placeholder="请选择计划入园时间 >" ref='datePickerStart'
							:start="recruitStartTime" @change="recruitStart" :defaultValue="defaultValue1">
						</biaofun-datetime-picker>
						<input type="" :value="formData.intime" style="display: none;" />
					</uni-forms-item>
					<uni-forms-item label="计划出园时间" required name="outtime" labelWidth="auto">
						<biaofun-datetime-picker placeholder="请选择计划出园时间 >" ref='datePickerEnd'
							:disabled="formData.intime==''" @change="recruitEnd" :defaultValue="defaultValue2">
						</biaofun-datetime-picker>
						<input type="" :value="formData.outtime" style="display: none;" />
					</uni-forms-item>

				</uni-forms>
			</view>
		</view>

		<view class="btn-box">
			<button class="btn1" type="warn" size="mini" @click="doSubmit('baseForm')"> 确定 </button>
			<button class="btn2 ml10" type="warn" size="mini" plain="true" @click="doCancel()"> 取消 </button>
		</view>

		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="5000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		Platform,
		Storage_Key,
		ProjectStates,
		ProjectKeys,
		UserJobsType,
		CarSetting,
		timeslot
	} from '@/static/config.js';
	import request from '@/common/request.js';
	import attachment from '@/components/attachment/attachment.vue';
	import moment from "moment";
	export default {
		components: {
			attachment
		},

		computed: {
			wxUserInfo() {
				return this.$storage.get(Storage_Key.user_info, true);
			},
			WebUserInfo() {
				return this.$storage.get(Storage_Key.web_user_info, true);
			},
		},
		data() {
			return {
				// 提示信息弹窗
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				formData: {
					id: "",
					carcode: "", //车牌号
					goods: "", //货物信息
					destination: "", //目的地
					reason: "", //入园原因（装货、卸货）
					goodssource: "", //获取来源
					number: "", //货物数量
					transitno: "", //转运联单号
					contactphone: "", //联系人电话
					driver: "", //驾驶员
					escort: "", //押运员
					others: "", //其他人员
					intime: "", //驶入时间
					outtime: "", //驶出时间
					orgcode: "", //目的地企业编号20221024添加
					creatorid: "",
					creator: "",
					updaterid: "",
					updater: "",
					cartype: "2", // 车辆类型 2人员预约
					codeimg: "", //健康码图片
					tripimg: "", //行程卡图片
					persontype: "企业从业人员",
				},
				healthcodeImgList: [], //健康码照片
				healthcodeImgCount: 1, //
				travelcardImgList: [], //行程卡照片
				travelcardImgCount: 1,
				recruitStartTime: '',
				carLists: [], // 车辆数据信息
				carIndex: 0, // 车牌号索引
				qyLists: [], // 企业数据信息
				Approver: [], //审批人信息
				reasonLists: [{
					index: 0,
					name: '装货'
				}, {
					index: 1,
					name: '卸货'
				}, {
					index: 2,
					name: '其他'
				}],
				reasonIndex: 0,
				// 目的地查询
				keyword: "",
				carkeyword: "", //车辆检索关键字
				checkData: [],
				bindCheckIds: [], //回显 选中的ID
				carsearch: {
					pageIndex: 1,
					pageSize: 25,
				},
				defaultValue1: "", //默认驶入时间
				defaultValue2: "", //默认驶出时间
				isEdit: false,
				persontypeLists: CarSetting.personType, //人员类型
				persontypeIndex: 0,
				// 校验规则
				formRules: {
					destination: {
						rules: [{
							required: true,
							errorMessage: '请选择目的地'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请选择入园原因'
						}]
					},
					contactphone: {
						rules: [{
								required: true,
								errorMessage: '请输入人员电话'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg =
										/^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
									if (!reg.test(value)) {
										return callback('手机号格式不正确')
									}
								}
							}
						]
					},
					driver: {
						rules: [{
							required: true,
							errorMessage: '请输入人员姓名'
						}, {
							maxLength: 6,
							errorMessage: '姓名不能超过五个字'
						}]
					},

					intime: {
						rules: [{
								required: true,
								errorMessage: '请选择计划驶入时间'
							},
							// {
							// 	validateFunction: function(rule, value, data, callback) {
							// 		if (value == '') {
							// 			callback('请选择计划驶入时间')
							// 		} else {
							// 			const givenTime = moment.unix(value / 1000).format('HH:mm');
							// 			console.log(givenTime);
							// 			const intervals = timeslot;
							// 			const [hours, minutes] = givenTime.split(':').map(Number);
							// 			for (const interval of intervals) {
							// 				const [startTime, endTime] = interval.split('-');
							// 				const [startHours, startMinutes] = startTime.split(':').map(Number);
							// 				const [endHours, endMinutes] = endTime.split(':').map(Number);
							// 				if ((hours > startHours || (hours === startHours && minutes >=
							// 						startMinutes)) && (hours < endHours || (hours ===
							// 						endHours && minutes < endMinutes))) {
							// 					callback('计划驶入时间不在通行时间内,请重新选择')
							// 				}
							// 			}
							// 		}
							// 		return true
							// 	}
							// },
						]
					},
					outtime: {
						rules: [{
								required: true,
								errorMessage: '请选择计划驶出时间'
							},
							// {
							// 	validateFunction: function(rule, value, data, callback) {
							// 		if (value == '') {
							// 			callback('请选择计划驶出时间')
							// 		} else {
							// 			const givenTime = moment.unix(value / 1000).format('HH:mm');
							// 			console.log(givenTime);
							// 			const intervals = timeslot;
							// 			const [hours, minutes] = givenTime.split(':').map(Number);
							// 			for (const interval of intervals) {
							// 				const [startTime, endTime] = interval.split('-');
							// 				const [startHours, startMinutes] = startTime.split(':').map(Number);
							// 				const [endHours, endMinutes] = endTime.split(':').map(Number);
							// 				if ((hours > startHours || (hours === startHours && minutes >=
							// 						startMinutes)) && (hours < endHours || (hours ===
							// 						endHours && minutes < endMinutes))) {
							// 					callback('计划驶出时间不在通行时间内,请重新选择')
							// 				}
							// 			}
							// 		}
							// 		return true
							// 	}
							// },
						]
					},
				},
			}
		},
		onReady() {
			this.$refs.baseForm.setRules(this.formRules)

		},
		onLoad(options) {
			let _self = this;
			if (options.code) {
				_self.formData.carcode = options.code;
			}
			// _self.setListening(); // 设置监听
			// 默认日期
			let tm = new Date();
			let datestring = tm.getFullYear() + "-" + (tm.getMonth() + 1) + "-" + tm.getDate() + " " + tm.getHours() +
				":" + tm.getMinutes();
			this.recruitStartTime = datestring
			//_self.defaultValue1 = datestring;
			if (options && options.item) {
				// _self.loadCarData();
				_self.formData = JSON.parse(decodeURIComponent(options.item));
				_self.isEdit = true; //修改
				var date1 = new Date(_self.formData.intime);
				let datestring1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate() + " " + date1
					.getHours() +
					":" + date1.getMinutes();
				_self.defaultValue1 = datestring1;
				var date2 = new Date(_self.formData.outtime);
				let datestring2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate() + " " + date2
					.getHours() +
					":" + date2.getMinutes();
				_self.defaultValue2 = datestring2;
				// if (options.disabled) {
				// 	_self.disabled = false; // 查看 - 不可改
				// }
			}
			// 预约车辆类型
			if (options && options.params) {
				_self.formData.cartype = JSON.parse(decodeURIComponent(options.params));
			}
			// _self.loadCarData();

			// 获取目的地数据
			//this.loadDestinationData();
		},
		onShow() {
			// this.loadCarData();
		},
		methods: {
			// 设置监听
			setListening() {
				let _self = this;
				uni.$on('doSubmit', function(data) {
					if (data.key) {
						console.log(data.msg)
						_self.state = data.msg;
						_self.doSubmit();
					}
				})
				// 图片删除
				uni.$on('file-del', function(data) {
					if (data.key) {
						console.log("-------------图片删除" + data.msg)
						switch (data.msg) {
							case 0: // 健康码图片
								_self.formData.codeimg = "";
								break;
							case 1: // 行程卡图片
								_self.formData.tripimg = ""; // 行程卡照片
								break;
						}
					} else {
						_self.messageToggle('error', data.msg);
					}
					console.log(_self.formData)
				})
				// 图片添加、修改
				uni.$on('file-refresh', function(data) {
					if (data.key) {
						let tmp = data.msg;
						var tmpdata;
						if (!!tmp) {
							tmpdata = tmp.split('_');
						}
						var flag = tmpdata[0]
						var fileids = tmpdata[1]
						switch (flag) {
							case "0": // 健康码图片
								_self.formData.codeimg = fileids
								break;
							case "1": // 行程卡图片
								_self.formData.tripimg = fileids // 行程卡照片
								break;
						}
					} else {
						_self.messageToggle('error', data.msg);
					}
				})

			},

			timeInPort(type, field, value) {
				// 校验-只能输入数字和小数点
				if (type === 'num') {
					let val = value.replace(/(^\s*)|(\s*$)/g, "")
					//  console.log(val);
					if (!val) {
						this.formData.number = '';
						return
					}
					var reg = /[^\d.]/g

					// 只能是数字和小数点，不能是其他输入
					val = val.replace(reg, "")
					// 保证第一位只能是数字，不能是点
					val = val.replace(/^\./g, "");
					// 小数只能出现1位
					val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
					// 小数点后面保留2位
					//val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
					//  console.log(val);
					this.$nextTick(() => {
						this.$set(this.formData, field, val);
					})
				}
			},
			// 获取目的地数据
			loadDestinationData() {
				let _self = this;
				request({
					url: Platform.api_requestUrl + '/osp-basemain-organization/GetOrganizationDataAdmin',
					data: {
						code: Platform.code,
						roleName: UserJobsType[6].text // 企业管理员
					},
					method: 'GET',
				}).then(response => {
					uni.hideLoading();
					if (response.code == 200) {
						this.$refs.destinationtree._show()
						if (response.data.length == 0 || response.data.children.length == 0) {
							_self.messageToggle('error', response.message || '目的地查询失败');
						} else {
							var tmpData = response.data.children;
							//根据搜索名称筛选
							if (!!_self.keyword) {
								var searchData = tmpData.filter(c => c.name.indexOf(_self.keyword) > -1);
								_self.qyLists = searchData;
							} else {
								_self.qyLists = tmpData;
							}
							if (!_self.isEdit) {} else {
								_self.bindCheckDestination(_self.formData.destination)
							}
						}
						//_self.formData.destination = _self.qyLists[0].code; //默认值
						// 	// _self.messageToggle('success', '提交成功');
					} else {
						_self.messageToggle('error', response.message || '目的地查询失败');
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showModal({
						content: '目的地查询失败',
						showCancel: false
					})
				});
			},

			// 加载车辆数据
			loadCarData() {
				let _self = this;
				let formData = {
					pageIndex: _self.carsearch.pageIndex,
					pageSize: _self.carsearch.pageSize,
					carCode: _self.carsearch.carkeyword || "",
					openid: _self.wxUserInfo.openId || "",
					state: [CarSetting.carStatus.st_1] + '' // 车辆状态标记（0：未审核，1：已审核，2：未通过）
				};
				request({
					url: Platform.api_requestUrl + '/stp-car/getListDetail',
					method: 'GET',
					data: formData,
				}).then(response => {
					uni.hideLoading();
					if (response.code == 200) {
						if (response.data.length == 0) {
							// _self.carLists.push({
							// 	"id": "001",
							// 	"code": "鲁A888888"
							// });
							_self.messageToggle('error', response.message || '暂时没有车牌，请点击+号先添加车辆');
						} else {
							_self.carLists = response.data;
							if (!_self.isEdit) {
								//_self.formData.carcode = _self.carLists[0].code; //默认值
							} else {
								_self.bindCheckCar(_self.formData.carcode)
							}

						}
						// _self.messageToggle('success', '提交成功');
					} else {
						_self.messageToggle('error', response.message || '查询失败');
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showModal({
						content: '车辆查询失败',
						showCancel: false
					})
				});
				// uni.request({
				// 	url: Platform.api_requestUrl + '/stp-car/getListDetail',
				// 	header: {},
				// 	data: formData,
				// 	method: 'GET',
				// 	success: (response) => {
				// 		uni.hideLoading();
				// 		if (response.data.code == 200) {
				// 			if (response.data.data.length == 0) {
				// 				// _self.carLists.push({
				// 				// 	"id": "001",
				// 				// 	"code": "鲁A888888"
				// 				// });
				// 				_self.messageToggle('error', response.data.message || '暂时没有车牌，请点击+号先添加车辆');
				// 			} else {
				// 				_self.carLists = response.data.data;
				// 				if (!_self.isEdit) {
				// 					//_self.formData.carcode = _self.carLists[0].code; //默认值
				// 				} else {
				// 					_self.bindCheckCar(_self.formData.carcode)
				// 				}

				// 			}
				// 			// _self.messageToggle('success', '提交成功');
				// 		} else {
				// 			_self.messageToggle('error', response.data.message || '查询失败');
				// 		}
				// 	},
				// 	complete: () => {
				// 		console.log("complete")
				// 	},
				// 	fail: (error) => {
				// 		uni.hideLoading();
				// 		uni.showModal({
				// 			content: '预约信息保存失败',
				// 			showCancel: false
				// 		})
				// 	},
				// })
			},

			recruitStart(e) {
				if (!this.disabled)
					this.formData.intime = e.dt.getTime();
			},
			recruitEnd(e) {
				let rs = new Date(this.formData.intime).getTime();
				let re = e.dt.getTime();
				if (rs > re) {
					this.formData.outtime = ''
					this.$refs.datePickerEnd.dateStr = '>' //-----
					this.formData.intime = ''
					this.$refs.datePickerStart.dateStr = '>' //-----
					this.formData.outtime = ''
					this.$refs.datePickerEnd.dateStr = '>' //-----
					this.messageToggle('error', '计划驶出时间应该在计划驶入时间之后！')
					return
				}
				this.formData.outtime = re;
			},

			earchcar(e) {
				let _self = this;
				_self.carsearch.carkeyword = e.value
				this.loadCarData()
			},
			morecar() {
				let _self = this;
				_self.carsearch.pageIndex++;
				_self.loadCarData();
			},
			carChange(e) {
				if (e.length < 1) {
					return
				}
				this.formData.carcode = e[0].code;
			},
			//入园原因改变
			persontypeChange(e) {
				this.persontypeIndex = e.target.value;
				this.formData.persontype = this.persontypeLists[e.target.value].name;
			},
			bindCheckCar(val) {
				let _self = this;
				var items = _self.carLists;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (val.includes(item.code)) {
						//_self.checkData.push(item)
						//_self.bindCheckIds.push(values);
						_self.$set(item, 'checked', true)
					} else {
						_self.$set(item, 'checked', false)
					}
				}
				_self.carLists = items;
			},
			//选择目的地
			selectdestination() {
				let _self = this;
				this.loadDestinationData()
			},
			earchdestination(e) {
				let _self = this;
				_self.keyword = e.value
				this.loadDestinationData()
			},
			moredestination() {
				let _self = this;
				_self.loadDestinationData();
			},
			destinationChange(e) {
				if (e.length < 1) {
					return
				}
				this.formData.destination = e[0].name.split('(')[0]
				this.formData.orgcode = e[0].code;
				//审批人信息
				this.Approver = e[0].peoples;
			},
			bindCheckDestination(val) {
				let _self = this;
				var items = _self.qyLists;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (val.includes(item.name)) {
						//_self.checkData.push(item)
						//_self.bindCheckIds.push(values);
						_self.$set(item, 'checked', true)
					} else {
						_self.$set(item, 'checked', false)
					}
				}
				_self.qyLists = items;
			},
			// 提交预约信息
			doSubmit(ref) {
				let _self = this;
				_self.formData.creatorid = _self.wxUserInfo.openId;
				_self.formData.creator = _self.wxUserInfo.nickName;
				if (_self.isEdit) {
					_self.formData.updaterid = _self.wxUserInfo.openId;
					_self.formData.updater = _self.wxUserInfo.nickName;
				}
				// 平台配置 - 是否需要审批
				request({
					url: Platform.api_requestUrl + '/stp-car/getapplication',
					data: {
						key: 'approve_car_checkin'
					},
					method: 'GET',
				}).then(response => {
					if (response.code == 200) {
						if (response.data != 'true') {
							_self.formData.state = '0'; // 审批状态 - 默认通过
						} else {
							// 0审批通过/1已失效（车辆入园登记后失效）/2待审批/3审批不通过
							_self.formData.state = '2'; // 审批状态 - 待审批
						}
					} else {}
				}).catch(error => {
					console.log("complete")
				});
				// if (Platform.auth.approve_car_checkin) {
				// 	// 0审批通过/1已失效（车辆入园登记后失效）/2待审批/3审批不通过
				// 	_self.formData.state = '2'; // 审批状态 - 待审批
				// } else {
				// 	_self.formData.state = '0'; // 审批状态 - 默认通过
				// }
				// _self.formData.state = '2'; // 审批状态 - 待审批

				uni.showModal({
					title: '提示',
					content: '确认目的地【' + _self.formData.destination + '】',
					success: function(res) {
						if (res.confirm) {
							_self.onSubmit(ref);
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			// 确认提交
			onSubmit(ref) {
				let _self = this;
				if (_self.formData.destination == '') {
					_self.messageToggle('error', '请选择目的地！');
					return;
				}
				_self.$refs[ref].validate().then(res => {
					uni.showLoading({
						title: '提交中...',
						mask: false
					});
					request({
						url: Platform.api_requestUrl + '/stp-booking/SaveOrUpdate',
						data: _self.formData,
						method: 'POST',
					}).then(response => {
						uni.hideLoading();
						if (response.code == 200) {
							_self.messageToggle('success', '提交成功');
							// 返回的预约信息
							let res = response.data;
							// 添加审批流程
							// 目的地企业管理员信息
							let peoples = _self.Approver;
							let form = {
								creatorid: res.updaterid, // 提交人id
								creator: res.updater, // 提交人姓名
								updaterid: peoples.length > 0 ? peoples[0].id : '', // 审批人id
								updater: peoples.length > 0 ? peoples[0].name : '', // 审批人姓名
								bookingid: res.id, // 预约id
								phone: peoples.length > 0 ? peoples[0].phone : '' // 审批人电话
							}
							if (!_self.isEdit) { //新增
								_self.doSubmitApproval(form);
							} else { //编辑
								form.id = _self.formData.approvalid,
									_self.doSubmitApproval(form);
							}
							uni.switchTab({
								url: '/pages/booking/booking-car-list'
							})
						} else {
							_self.messageToggle('error', response.message || '提交失败');
						}
					}).catch(error => {
						uni.hideLoading();
						uni.showModal({
							content: '平台账号登录失败',
							showCancel: false
						})
					});
				}).catch(err => {
					console.log('err', err);
				})
			},
			doCancel() {
				uni.navigateBack();
			},
			// 添加审批流程
			doSubmitApproval(info) {
				request({
					url: Platform.api_requestUrl + '/stp-booking-approval/SaveOrUpdate',
					data: info,
					method: 'POST',
				}).then(response => {
					uni.hideLoading();
					if (response.code == 200) {} else {}
				}).catch(error => {
					console.log("complete")
				});
			},
			messageToggle(type, msg) {
				this.msgType = type
				this.messageText = msg
				this.$refs.message.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 0 15px 15px 15px;
		background-color: #fff;
	}

	/deep/ .example .uni-forms-item__content {
		overflow: auto;
	}

	/deep/ .example .uni-section-header {
		padding: 5px 10px;
	}

	/deep/ .example .uni-input-input {
		text-align: right;
	}

	/deep/ .example .uni-input-placeholder {
		text-align: right;
	}

	/deep/ .example .uni-input-placeholder {
		text-align: right;
	}

	/deep/ .example .uni-easyinput__content {
		border-color: #fff !important;
	}

	/deep/ .example .uni-easyinput__content-input {
		text-align: right;
	}

	/deep/ .example .uni-forms-item__inner {
		border-bottom: 1px solid #e9e9e9;
		padding-bottom: 10px;
		padding-top: 15px;
		width: 100%;
		overflow: hidden;
	}

	/deep/ .example .uni-input {
		text-align: right;
		padding: 0;
	}

	/deep/ .example .uni-date-x {
		padding: 0;
	}

	/deep/ .example .uni-date__x-input {
		padding: 0;
		text-align: right;
	}

	/deep/ .example .uni-date-x--border {
		border: 0;
	}

	.btn-box {
		background: #FFFFFF;
		margin: 15px 0;
		display: flex;
		justify-content: space-around;
		margin: 15px 10px;

		.btn1 {
			width: 90%;
			-webkit-flex: 1;
			background-color: $app-platform-color;
		}

		.btn2 {
			width: 90%;
			-webkit-flex: 1;
			color: $app-platform-color !important;
			border: 1px solid $app-platform-color !important;
		}
	}

	.add {
		text-align: center;
		border-radius: 8rpx;
		position: absolute;
		right: 5rpx;
		bottom: 30rpx;
		justify-content: center;
		align-items: center;

		.addImg {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.lnhgt {
		line-height: 36px !important;
	}

	.tkiTree {
		display: block;
		height: 100vh;
		overflow: hidden !important;
	}

	.teambox {
		height: 100%;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		padding: 8px 2px;
	}

	.tkicarbox {
		height: 100%;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		padding: 8px 2px;
		// margin-right: 25px;
	}
</style>